<script setup >
import { ref, reactive, h } from "vue";
import { NDataTable, useMessage, NButton, useDialog, NSpin } from "naive-ui";
import {
  findAddress,
  addAddress,
  editAddress,
  deleteAddress,
} from "@/api/order";

const finaddress = () => {
  findAddress().then((res) => {
    res.forEach((element) => {
      element.addressd = `${element.fullLocation} ${element.address}`;
    });
    tableData.value = res;
    tableLoading.value = false;
  });
};
finaddress();

const dialog = useDialog();
const message = useMessage();
let tableLoading = ref(true);
const createColumns = ({ eAddress, delAddress }) => {
  return [
    {
      title: "收货人",
      key: "receiver",
    },
    {
      title: "地址",
      key: "addressd",
    },
    {
      title: "联系方式",
      key: "contact",
    },
    {
      title: "操作",
      key: "id",
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              type: "primary",
              size: "small",
              onClick: () => eAddress(row),
            },
            { default: () => "编辑" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              type: "error",
              size: "small",
              style: "margin-left:20px",
              onClick: () => delAddress(row),
            },
            { default: () => "删除" }
          ),
        ];
      },
    },
  ];
};

const tableData = ref([]);

const columns = createColumns({
  eAddress(row) {
    openAddressEdit(row);
  },
  delAddress(row) {
    dialog.create({
      title: "提示",
      content: "您确认删除当前地址吗？",
      positiveText: "确定",
      negativeText: "取消",
      onPositiveClick: () => {
        deleteAddress(row.id)
          .then(() => {
            message.success("删除成功");
            const index = tableData.value.findIndex((val) => val.id === row.id);
            tableData.value.splice(index, 1);
          })
          .catch((err) => {
            message.error("删除失败");
          });
      },
    });
  },
});

const addressDom = ref(null);
const openAddressEdit = (address) => {
  addressDom.value.open(address);
};

// 成功添加或修改地址
const successHadler = (form) => {
  const address = tableData.value.find((item) => item.id === form.id);
  if (address) {
    for (const key in address) {
      address[key] = form[key];
    }
  } else {
    finaddress();
    tableLoading.value = true;
  }
};
</script>

<template>
  <div class="user-address">
    <n-spin :show="tableLoading">
      <p style="margin-bottom: 20px">
        <span style="font-size: 14px"
          >已保存收货地址(地址最多保存10条，还能保存{{
            10 - tableData.length
          }}条)</span
        >
        <span style="float: right"
          ><n-button size="small" type="primary" @click="openAddressEdit({})"
            >添加地址</n-button
          ></span
        >
      </p>

      <n-data-table :columns="columns" :data="tableData" :bordered="false" />
    </n-spin>
    <address-edit ref="addressDom" @commit="successHadler"></address-edit>
  </div>
</template>

<style scoped >
.user-address {
  background-color: #fff;
  height: 100%;
  padding: 20px;
}
</style>